<template>
  <!-- 新版虞豆商城 -->
  <div class="server_box " v-loading="loading">
    <div class="shangjia_box flex">
      <div class="shangjia_num">
        <div>选择虞都互联的商家已有</div>
        <div>
          <b>{{totalNum}}+</b>
        </div>
      </div>
      <div class="shangjia_list">
        <vue-seamless-scroll :data="slides" :class-option="defaultOption">
          <div class="systemNotice flex">
            <img v-for="item in slides" :key="item.id" :src="item.img" alt="">
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="service-box ">

      <div class="content flex" v-if="menuGroupList&&menuGroupList.length&&serviceList">
        <!--  :class="{'jjdq':dayNum(item.closeTime)<7&&dayNum(item.closeTime)>=0,'zc':item.state==1,'dq':item.state==2,'wkt':!item.businessId}" -->
        <div class="service-item " v-for="(item,i) in menuGroupList" :key="i">
          <div class="top flex">
            <div class="name flex">
              <img :src="item.icon||'https://imgage.maimaihao.com/yuduhulian/yudoudefault.png'" alt="">
              <div>
                <div class="name_time flex">
                  <b>{{item.groupName}}</b>
                  <div class="endtime" v-if="item.businessId">
                    <span v-if="item.buyWay==2">到期时间：{{item.closeTime}}</span>
                  </div>

                </div>

                <div class="tip">
                  {{ item.jianjie ||'暂无简介...'}}
                </div>
              </div>

            </div>
            <div class="price_box">
              <!-- <div class="pricename" v-if="item.buyWay!=1">
                价格
              </div> -->
              <div>
                <span style="color: #24A813;" v-if="item.buyWay==1">免费</span>
                <span v-if="item.buyWay==2">{{item.monthAmount}}虞豆/月</span>
                <span v-if="item.buyWay==3">{{item.monthAmount}}虞豆/长期</span>
              </div>
              <div style="margin-left: 15px;" class="auto" v-if="item.businessId!=5492&&(item.buyWay==2&&item.businessId)||(item.buyWay!=2&&item.businessId==5492&&item.state!=1)">
                <span>自动续费：</span>
                <el-switch @change="editAuto($event,item)" :disabled="nowDate==item.closeTime" v-model="item.isAuto" :active-value="1" :inactive-value="2" active-color="#24A813" inactive-color="#999999">
                </el-switch>
              </div>
            </div>

            <!-- v-if="item.businessId&&item.state!=1"  -->
            <div v-if="item.businessId&&item.state!=1" class="sign" v-text="dayNum(item.closeTime)<5&&dayNum(item.closeTime)>=0?'即将到期':(item.state==1?'正常':(item.businessId? '到期':'未开通'))">
            </div>
            <!-- <div class="auto" v-if="item.businessId!=5492">
              <span>自动续费：</span>
              <el-switch @change="editAuto($event,item)" :disabled="nowDate==item.closeTime" v-model="item.isAuto" :active-value="1" :inactive-value="2" active-color="#24A813" inactive-color="#999999">
              </el-switch>
            </div>
            <div class="tip" v-if="item.businessId!=5492">
              {{`自动续费开启后，系统将在服务有效期最后一天，续费1个月。`}}
            </div>
            <div v-else>
              {{`该功能开通后系统每月自动检测业务量，不符合使用条件的会自动停用该功能`}}
            </div> -->
          </div>
          <div class="img_des_box flex">
            <img :src="item.titleImg||'https://imgage.maimaihao.com/yuduhulian/zanwu.png'" alt="">
            <div class="des_box">
              <div class="des_box_top">
                <div class="yikainum">800+人已开通</div>
                <div class="des">
                  {{ item.shuoming }}
                </div>
              </div>
              <div class="btns">
                <!-- <el-button style="background-color:#fff;border:1px solid #f2f2f2" size="small" @click="lianxi(item.businessId)" v-if="item.type==2">联系技术</el-button> -->
                <el-button style="margin-right:10px" size="small" plain type="primary" @click="goDetail(item)">功能介绍</el-button>
                <el-button v-if="!item.businessId" size="small" type="primary" @click="kaitong(item)" v-loading="loading">立即开通</el-button>
                <el-button v-if="(item.buyWay==2&&item.businessId)||(item.buyWay!=2&&item.businessId==5492&&item.state!=1)" size="small" type="primary" @click="submitForm(item)" v-loading="loading">立即续费</el-button>
                <el-button style="background-color: #24A81333;border-color: #24A81333;color: #24A813;" v-else-if="item.buyWay!=2&&item.businessId" size="small" type="primary" disabled>正在使用</el-button>

              </div>
            </div>
          </div>

        </div>
      </div>
      <div v-else style="text-align:center;line-height:300px">
        暂未开通任何服务
      </div>
    </div>

    <moduleOpenDialog v-if="shopInfo&&shopInfo.tenantId" :tenantId="shopInfo.tenantId" :campNumber="shopInfo.campNumber" ref="moduleOpenDialog" @success="init"></moduleOpenDialog>
  </div>
</template>

<script>
import { menuGroupList } from "@/api/system/menuGroup.js";
import tabBar from "@/components/tenant/tabBar.vue";
import valueAddedServices from "@/api/shanghuduan/valueAddedServices";
import { formatDate } from "@/utils/index";
import { GetPcfnList } from "@/api/IntroductionPartners/index";
// 开通弹窗
import moduleOpenDialog from "../../../components/tenant/moduleOpenDialog.vue";

import { mapGetters } from "vuex";

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "Jifenshangcheng",
  components: {
    tabBar,
    moduleOpenDialog,
    vueSeamlessScroll,
  },
  data() {
    return {
      tabActive: "1",
      loading: false,

      allCheck: false,
      serviceList: null,
      // 查询参数
      queryParams: {
        closeTimeStart: "",
        closeTimeEnd: "",
        dataType: "all",
        type: "1",
      },
      nowDate: "",

      menuGroupList: [],
      plantformList: null, //所有的接口渠道平台
      myServiceList: null, //已开通的接口服务

      // swiperOptions: {
      //   loop: true, // 循环模式选项
      //   slidesPerView: 15,
      //   speed: 500,
      //   autoplay: {
      //     delay: 0, // 自动切换时间间隔
      //     disableOnInteraction: true, // 用户操作后是否继续自动切换
      //   },
      //   pagination: false,
      //   navigation: false,
      // },
      defaultOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 15, // 开始无缝滚动的数据量，根据dataList.length设置
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下，1向上，2向左，3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度（默认值0是无缝不停止的滚动），direction=>0/1
        singleWidth: 0, // 单步运动停止的宽度（默认值0是无缝不停止的滚动），direction=>2/3
        waitTime: 0, // 单步运动停止的时间（默认值1000ms）
      },
      slides: [],
      totalNum: 500,
    };
  },

  created() {
    let date = new Date();
    this.nowDate = formatDate(date).slice(0, 10);
    this.init();
  },
  computed: {
    ...mapGetters(["shopInfo"]),
    dayNum() {
      return (val) => {
        let date = Date.parse(new Date(val)) / 1000;
        var today = Date.parse(new Date()) / 1000; //当前时间戳
        var nTime = date - today;
        var day = Math.floor(nTime / 86400) + 1;
        return day;
      };
    },
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        name: "Gongnengxiangqing",
        query: {
          groupId: item.groupId,
        },
      });
    },
    init() {
      this.getmenuGroupList();
      this.getslidesList();
    },

    // 获取所有的菜单分组（功能模块）
    getmenuGroupList() {
      this.loading = true;
      menuGroupList({ status: 0 }).then((response) => {
        this.menuGroupList = response.rows;
        // this.total = response.total;
        this.getMyService(
          this.shopInfo && this.shopInfo.tenantId ? this.shopInfo.tenantId : 1
        );
        this.loading = false;
      });
    },
    // 获取合作商家
    async getslidesList() {
      const res = await GetPcfnList({ type: 2 });
      this.slides = res.rows;
      if (this.slides && this.slides.length) {
        this.totalNum = this.slides[this.slides.length - 1].sort;
      }
    },

    // 开通功能模块服务
    kaitong(item) {
      let type = 1;
      if (item.serveType) type = item.serveType;
      this.$refs.moduleOpenDialog.open(item, 1, type);
    },

    // 获取租户开通的增值服务
    getMyService(tenantId) {
      // if()
      this.queryParams.tenantId = tenantId;
      valueAddedServices
        .myValueAddedServiceList(this.queryParams)
        .then((res) => {
          if (res.rows && res.rows.length) {
            this.serviceList = res.rows;
          } else {
            this.serviceList = [];
          }
          this.mergeServices();
        });
    },
    // 合并获取到的已开通服务和全部服务列表
    mergeServices() {
      if (this.serviceList && this.serviceList.length) {
        if (this.tabActive == 1) {
          this.menuGroupList.forEach((r1, i1) => {
            this.serviceList.forEach((r2) => {
              if (r1.groupId == r2.businessId) {
                this.menuGroupList[i1] = { ...r1, ...r2 };
              }
            });
          });
        } else if (this.tabActive == 2) {
          this.myServiceList = this.serviceList;
          this.plantformList.forEach((r1, i1) => {
            let cont = 0;
            if (r1.channelType == 2) {
              r1.isHide = true;
            }
            this.serviceList.forEach((r2, i2) => {
              if (r1.id == r2.businessId) {
                cont++;
                this.plantformList[i1] = { ...r1, ...r2 };
                this.myServiceList[i2] = { ...r1, ...r2 };
              }
            });
            if (cont) {
              this.plantformList[i1].cont = cont;
            }
          });
        }
      } else {
        if (this.tabActive == 2) {
          this.plantformList.forEach((r1, i1) => {
            if (r1.channelType == 2) {
              r1.isHide = true;
            }
          });
        }
      }
      this.$forceUpdate();
    },
    // 改变自动续费状态
    editAuto(e, item) {
      valueAddedServices.myValueAddedServiceChangeAuto(item).then((res) => {
        this.getMyService();
      });
    },
    submitForm(item) {
      console.log("%c Line:389 🍿 item", "color:#3f7cff", item);
      let type = 1;
      if (item.serveType) {
        type = item.serveType;
        item.groupId = item.businessId;
      }
      this.$refs.moduleOpenDialog.open(item, 2, type);
    },
    // // 全选
    // selectAll(e) {
    //   if (e) {
    //     this.serviceList.forEach((r) => {
    //       r.checked = true;
    //     });
    //   } else {
    //     this.serviceList.forEach((r) => {
    //       r.checked = false;
    //     });
    //   }
    // },

    lianxi(id) {
      this.$refs.contactServer.open(id);
    },
  },
};
</script>
<style scoped lang="scss">
.server_box {
  max-width: 1550px;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  .shangjia_box {
    width: 1520px;
    height: 134px;
    background: #6c5dd3;
    box-shadow: 0px 0px 4px 1px rgba(200, 200, 200, 0.5);
    border-radius: 4px;
    padding: 10px;
    .shangjia_num {
      width: 247px;
      flex-shrink: 0;
      background: #ffffff;
      border-radius: 10px;
      text-align: center;
      padding-top: 20px;
      div:nth-of-type(1) {
        font-size: 18px;
      }
      div:nth-of-type(2) {
        font-size: 32px;
        color: #6c5dd3;
        margin-top: 10px;
      }
    }
  }
  .shangjia_list {
    width: 100%;
    margin-left: 10px;
    align-items: center;
    overflow: hidden;
    padding-top: 20px;
    .systemNotice {
      flex-wrap: nowrap;
    }
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-right: 10px;
    }
  }

  .service-box {
    min-height: calc(100vh - 200px);
    margin-top: 10px;
    .content {
      flex-wrap: wrap;
    }
    .service-item {
      width: 500px;
      background: #ffffff;
      box-shadow: 0px 0px 4px 1px rgba(200, 200, 200, 0.5);
      border-radius: 4px;
      margin: 0 10px 10px 0;
      position: relative;
      overflow: hidden;
      padding: 15px;

      .top {
        justify-content: space-between;
        position: relative;
        .sign {
          position: absolute;
          left: -15px;
          top: -15px;
          font-size: 12px;
          color: #fff;
          padding: 3px 15px;
          background-color: red;
          border-radius: 10px 0 0 0;
        }
        .name {
          align-items: center;
          img {
            width: 48px;
            height: 48px;
            margin-right: 10px;
          }
          .name_time {
            font-size: 16px;
            align-items: center;
            .endtime {
              font-size: 12px;
              color: #999;
              margin-left: 10px;
            }
          }
          .tip {
            width: 280px;
            font-weight: 500;
            font-size: 14px;
            color: #666666;
            line-height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 2px;
          }
        }
        .price_box {
          width: 160px;
          text-align: right;
          color: #6c5dd3;
          .pricename {
            color: #999;
          }
        }
      }
      .img_des_box {
        margin-top: 10px;
        img {
          width: 230px;
          height: 200px;
          flex-shrink: 0;
        }
        .des_box {
          margin-left: 10px;

          .des_box_top {
            background: #f7f7f7;
            padding: 8px;
            width: 230px;
            height: 159px;
            .yikainum {
              font-weight: 600;
              font-size: 14px;
              color: #6c5dd3;
            }
            .des {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 7;
              margin-top: 5px;
              font-size: 14px;
              color: #999999;
              line-height: 17px;
            }
          }
        }
        .btns {
          text-align: center;
          padding: 10px 0;
        }
      }

      // .tip {
      //   margin-top: 10px;
      // }
      // .sign {
      //   position: absolute;
      //   top: 0;
      //   right: 0;
      //   font-size: 12px;
      //   color: #24a813;
      //   padding: 3px 15px;
      //   background-color: #fff;
      //   border-radius: 0 0 0 10px;
      // }
      // &.jjdq {
      //   border: 1px solid #eb8200;
      //   .top {
      //     background-color: #fab562;
      //   }
      //   .sign {
      //     color: #eb8200;
      //   }
      // }
      // &.dq {
      //   border: 1px solid #da6565;
      //   .top {
      //     background-color: #da6565;
      //   }
      //   .sign {
      //     color: #da6565;
      //   }
      // }
      // &.wkt {
      //   border: 1px solid #b5b5b5;
      //   .top {
      //     background-color: #b5b5b5;
      //   }
      //   .sign {
      //     color: #b5b5b5;
      //   }
      // }
    }
  }
}
</style>
